<template>
	<view class="n-collapse-box" :class="{'n-collapse-box-shadow':boxShadow}"
		:style="{borderRadius: borderRadius+'rpx'}">
		<!-- 标题 -->
		<view class="n-collapse-title-box" :class="{'n-collapse-title-border': borderBottom}" :style="{
				backgroundColor: isShow&&!disabled?activeBgColor:defaultBgColor,
				height: height + 'rpx'}" @click.stop="showContent">
			<slot name="title">
				<!-- 标题-左 -->
				<text class="n-collapse-title" :style="{
						color: isShow&&!disabled?avtiveColor:defaultColor,
						fontSize:fontSize+'rpx'}">
					{{title}}
				</text>
				<!-- 标题-右 -->
				<image :src="rightIcon?rightIcon:require('./img/arrow-right.png')" class="n-right-icon"
					:class="{'n-right-icon-rotate': isShow&&!disabled}" />
			</slot>
		</view>
		<!-- 内容 -->
		<view class="n-collapse-content" :style="{height: isShow&&!disabled ? contentHeight+'px':0}">
			<view :id="`content${randomVal}`" class="n-collapse-content__content"
				:style="[{backgroundColor: contentBgColor},contentStyle]">
				<slot>
					<text class="n-collapse-content__text">
						{{content}}
					</text>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * collapse 手风琴
	 * @property {String} title 面板标题,默认为'标题'
	 * @property {String} rightIcon 标题右侧图标,默认为右箭头
	 * @property {String} activeBgColor 打开时标题背景色,默认为#2b85e4
	 * @property {String} defaultBgColor 标题默认背景色,默认为#fff
	 * @property {String, Number} height 标题高度,默认为88
	 * @property {String, Number} content 内容
	 * @property {String} contentBgColor 内容背景色，默认为#fff
	 * @property {Object} contentStyle 内容样式，默认为空对象
	 * @property {String, Number} borderRadius 面板圆角，默认为0
	 * @property {Boolean} boxShadow 是否开启面板阴影，默认为false
	 * @property {Boolean} disabled 是否禁用折叠并不展示内容，默认为false
	 * @property {Boolean} show 是否默认展示内容，默认为false
	 * @property {String} fontSize 标题文字大小，默认为30
	 * @property {String} avtiveColor 打开时标题文字颜色，默认为#fff
	 * @property {String} defaultColor 标题文字默认颜色，默认为#333
	 * @property {Boolean} borderBottom 是否显示标题下边框，默认为true
	 * 
	 * 
	 * this.$refs.collapse.init();重置内容高度
	 */
	export default {
		name: "collapse",
		props: {
			title: {
				type: String,
				default: '标题'
			},
			rightIcon: {
				type: String,
				default: ''
			},
			activeBgColor: {
				type: String,
				default: '#2b85e4'
			},
			defaultBgColor: {
				type: String,
				default: '#fff'
			},
			height: {
				type: [String, Number],
				default: '88'
			},
			content: {
				type: [String, Number],
				default: ''
			},
			contentBgColor: {
				type: String,
				default: '#fff'
			},
			contentStyle: {
				type: Object,
				default: () => {}
			},
			borderRadius: {
				type: [String, Number],
				default: '0'
			},
			boxShadow: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			show: {
				type: Boolean,
				default: false
			},
			fontSize: {
				type: String,
				default: "30"
			},
			avtiveColor: {
				type: String,
				default: "#fff"
			},
			defaultColor: {
				type: String,
				default: "#333"
			},
			borderBottom: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				contentHeight: '',//内容高度
				isShow: this.show,
				randomVal: '', //随机值
			};
		},
		mounted() {
			// 避免多个组件共用同一个id
			this.randomVal = Math.random().toString(36).substr(2);
			// 挂载时，当show为true，就获取内容的高度
			if (this.show) this.init();
		},
		watch: {
			isShow(val) {
				// console.log(val);
				// 首次展示，且contentHeight为空时才获取内容高度
				if (val && !this.contentHeight) {
					this.queryRect();
				}
			},
		},
		methods: {
			init() {
				this.$nextTick(function() {
					this.queryRect();
				})
			},
			// 获取内容高度
			queryRect() {
				const query = uni.createSelectorQuery().in(this);
				query.select(`#content${this.randomVal}`).boundingClientRect(res => {
					this.contentHeight = res.height;
				}).exec()
			},
			// 显示内容
			showContent() {
				this.isShow = !this.isShow
				if (this.isShow && !this.disabled) {
					this.$emit("show", '显示内容')

				} else if (!this.isShow && !this.disabled) {
					this.$emit("hide", '隐藏内容')

				} else if (this.disabled) {
					this.$emit("clickHandler", '点击了')

				}
			}
		}
	}
</script>

<style scoped>
	.n-collapse-box {
		overflow: hidden;
		width: 100%;
	}

	.n-collapse-box-shadow {
		box-shadow: 0 4rpx 10rpx rgba(167, 167, 167, .5);
	}

	.n-collapse-title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		transition-duration: .4s;
		transition-property: background-color;
	}

	.n-collapse-title-border {
		border-bottom: 2rpx solid #eee;
	}

	.n-collapse-title {
		font-size: 28rpx;
		transition-duration: .4s;
		transition-property: color;
	}

	.n-right-icon {
		width: 22rpx;
		height: 22rpx;
		transform: rotate(0deg);
		transition-duration: 0.25s;
		transition-property: transform;
	}

	.n-right-icon-rotate {
		transform: rotate(90deg);
	}

	.n-collapse-content {
		transition-duration: 0.25s;
		transition-property: height;
		overflow: hidden;
	}

	.n-collapse-content__content {
		padding: 24rpx;
	}

	.n-collapse-content__text {
	}
</style>
